<template>
  <div>
    <myDivider name="房间管理"></myDivider>
    <el-page-header @back="goBack" content="绑定机关超级管理员">
    </el-page-header>
    <div class="insertPopulation">


      <el-form ref="reinsertForm" :model="reinsertForm" label-width="80px" :inline="true" :rules="insertRules">

        <el-form-item label="名称:" :label-width="formLabelWidth"  class="formItemStyle" prop="name">
          <el-input v-model="reinsertForm.name" autocomplete="off" style="width: 262px" disabled></el-input>
        </el-form-item>


        <el-form-item label="上级机关:" :label-width="formLabelWidth" class="formItemStyle">
          <el-select v-model="reinsertForm.fatherAgenciesData" filterable placeholder="请选择" style="width: 262px;" disabled
            @filter-method="getFatherAgenciesOptionData(name)">
            <el-option v-for="item in fatherAgenciesOptionData" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="法定代表人:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input v-model="reinsertForm.legalRepresentativeName" autocomplete="off" style="width: 262px" disabled></el-input>
        </el-form-item>

      </el-form>



      <el-form ref="form" :model="reinsertForm" label-width="80px" :inline="true">



        <el-form-item label="联系电话:" :label-width="formLabelWidth" class="birthdayDateItemStyle">
          <el-input v-model="reinsertForm.telephoneNumber" autocomplete="off" style="width: 254px" disabled></el-input>
        </el-form-item>

        <el-form-item label="统一社会信用代码:" label-width="128px" class="formItemStyle">
          <el-input v-model="reinsertForm.socialCreditCode" autocomplete="off" style="width: 262px" disabled></el-input>
        </el-form-item>

        <el-form-item label="组织类型:" :label-width="formLabelWidth" class="formItemStyle">
          <el-select v-model="reinsertForm.type" placeholder="请选择" style="width: 262px;" disabled>
            <el-option v-for="item in typeOptionData" :key="item.value" :label="item.name" :value="item.value" >
            </el-option>
          </el-select>
        </el-form-item>


      </el-form>



      <el-form ref="form" :model="reinsertForm" label-width="80px" :inline="true">

        <el-form-item label="发证机关:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input v-model="reinsertForm.issuingAuthority" autocomplete="off" style="width: 262px" disabled></el-input>
        </el-form-item>

        <el-form-item label="超级管理员:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input v-model="reinsertForm.superAdministratorName" autocomplete="off" style="width: 262px" disabled></el-input>
        </el-form-item>

        <el-form-item label="绑定账号:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input v-model="reinsertForm.superAdministratorAccount" autocomplete="off" style="width: 262px" disabled></el-input>
        </el-form-item>

      </el-form>


      <el-form ref="form" :model="reinsertForm" label-width="80px" :inline="true">
        <el-form-item label="地址:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input v-model="reinsertForm.address" autocomplete="off" style="width: 1000px" disabled></el-input>
        </el-form-item>
      </el-form>


      <el-form ref="form" :model="reinsertForm" label-width="80px" :inline="true">

        <el-form-item label="颁发日期:" :label-width="formLabelWidth" class="formItemStyle">
          <el-date-picker type="date" v-model="reinsertForm.issueDate" style="margin-left:2px;width: 262px;" disabled
            placeholder="请选择">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="有效期限:" :label-width="formLabelWidth" class="formItemStyle">
          <el-date-picker type="date" v-model="reinsertForm.effectiveStartDate" style="margin-left:2px;width: 200px;" disabled
            placeholder="开始时间">
          </el-date-picker>~
          <el-date-picker type="date" v-model="reinsertForm.effectiveEndDate" style="margin-left:2px;width: 200px;" disabled
            placeholder="结束时间">
          </el-date-picker>
        </el-form-item>

      </el-form>

      <el-divider></el-divider>


      <!-- 分割线 下方是账号列表 -->
      <div>
        <div>
          <el-input class="findValue" v-model="query.userCode" placeholder="用户账号" @keyup.enter.native="queryUserList"
            clearable></el-input>
          <el-input class="findValue" v-model="query.userName" placeholder="用户姓名" @keyup.enter.native="queryUserList"
            clearable></el-input>
          <el-button type="primary" style="margin-top: 20px; margin-left: 15px" icon="el-icon-search"
            @click="queryUserList">搜索</el-button>
        </div>
        <div>
          <el-table :data="userData" style="width: 100%" class="menuTable" row-key="uid"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
            <el-table-column prop="account" label="用户账号">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>

            <el-table-column prop="departmentName" label="部门">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.departmentName" placement="top-start">
                  <span>{{ scope.row.departmentName == null ? '—' : scope.row.departmentName.length > 8 ?
                    "..." + scope.row.departmentName.substring(scope.row.departmentName.length - 8,
                      scope.row.departmentName.length) : scope.row.departmentName }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="roleNames" label="角色">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.roleNames" placement="top-start">
                  <span>{{ scope.row.roleNames == null ? '—' : scope.row.roleNames.length > 8 ?
                    "..." + scope.row.roleNames.substring(scope.row.roleNames.length - 8,
                      scope.row.roleNames.length) : scope.row.roleNames }}</span>
                </el-tooltip>
              </template>
            </el-table-column>

            <el-table-column prop="bindingPopulationPhoneNum" label="绑定手机号">
            </el-table-column>

            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">
                <span>{{ scope.row.status == '0' ? '禁用' : "正常" }}</span>
              </template>
            </el-table-column>

            <!-- <el-table-column label="操作" width="230px" fixed="right">
              <template slot-scope="scope">
                <el-button type="success" round size="mini" @click="bindingUserAccount(scope.row)">绑定</el-button>
                <el-button type="danger" round size="mini" @click="unbindingUserAccount(scope.row)">解绑</el-button>
              </template>
            </el-table-column> -->
          </el-table>

        </div>


        <div class="pageFooterFather">
          <el-pagination v-if="totalSize > pageSize" background layout="prev, pager, next" :total="totalSize"
            @current-change="handleCurrentChange" class="pageFooter">
          </el-pagination>
        </div>
      </div>
      <!-- 绑定超级管理员结束 -->

      
    </div>
  </div>
</template>

<style scoped>
.insertPopulation {
  margin-top: 90px;
  margin-left: 130px;
  height: 50%;
}

.menuTable {
  margin-top: 100px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.menuTable .cell {
  text-align: center;
}

.findValue {
  width: 13%;
  margin-top: 20px;
  margin-left: 15px;
}

.operation {
  margin-right: 50px;
  float: right;
  margin-top: 20px;
}

.formStyle {
  width: 1300px;
  margin: 20px auto;
}

.formItemStyle {
  margin-bottom: 28px;
  margin-left: 22px;
}

.pageFooter {
  margin-top: 3%;
  margin-left: 40%;
}

.pageFooterFather {
  top: 84%;
  position: relative;
  width: 100%;
}

.el-cascader-menu {
  height: fit-content;
  width: fit-content;
}


.birthdayDateItemStyle {
  margin-bottom: 28px;
  margin-left: 22px;
}
</style>



<script>
import {
  getFatherAgencies,
  insertAgency,
  getDictionaryList,
  getInDetail,
  // bindingAU,
  // unbindingAU,
} from "./room";

import {
  getUserList,

} from "../../user/user";


export default {
  data() {
    return {
      formLabelWidth: "120px", //控制前面label的宽度
      reinsertForm: {
        // 新增弹框参数
        name: "",
        fatherAgenciesData: "",
        legalRepresentativeName: "",
        telephoneNumber: "",
        socialCreditCode: "",
        type: "",
        issuingAuthority: "",
        address: "",
        issueDate: "",
        effectiveStartDate: "",
        effectiveEndDate: "",
        superAdministratorName:"无",
        superAdministratorAccount:"无",
      },
      insertRules: {
        phoneNumber: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "设备名称不能为空",
            trigger: "blur",
          },
        ],
      },
      operateType: 'insert',
      genderListData: [
        { id: '0', name: "女" }, { id: '1', name: "男" }
      ],
      fatherAgenciesOptionData: [],
      typeOptionData: [],
      query: {
        name: "",
        account: ""
      },
      userData: [], //用户数据
      pageNum: 0,
      pageSize: 10,
      totalSize: 0,

    }
  },

  activated() {
      this.getAgencyInfo(this.$route.query.id);
      this.operateType = 'binding'

    //刚进入页面加载
    this.queryUserList();
    this.getFatherAgenciesOptionData("");

  },
  mounted: function () {
    //初始化选项数据
    this.getAgencyTypeOptionData();

  },
  methods: {



    /**
     *  新增
     */
    onSubmit() {
      this.$refs['reinsertForm'].validate((valid) => { })
      if (this.reinsertForm.name == undefined || this.reinsertForm.name == "") {
        return false;
      }

      insertAgency(this.reinsertForm).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: '新增政府机关信息成功',
            type: 'success'
          });
          this.goBack();
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }

      })
    },


    /**
     *  修改
     */
    onSubmitUpdate() {

      this.reinsertForm.id = this.$route.query.id;
      updatePopulationInfo(this.reinsertForm).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: '个人信息修改成功',
            type: 'success'
          });
          this.goBack();
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }

      })
    },

    /**
     *  上一页
     */
    goBack() {
      this.$router.push({ path: '/room/roomManagement' });
    },

    /**
     * 获取上级机关列表
     */
    getFatherAgenciesOptionData(name) {
      getFatherAgencies(name).then((res) => {
        this.fatherAgenciesOptionData = res.data;
      })
    },


    /**
     * 获取类型字典数据
     */
    getAgencyTypeOptionData() {
      getDictionaryList("agency_type").then((res) => {
        this.typeOptionData = res.data;
      })
    },




    getAgencyInfo(id) {
      getInDetail(id).then((res) => {
        console.log(res)
        this.reinsertForm.name = res.name;
        this.reinsertForm.fatherAgenciesData = res.pid == 0 ? "" : res.pid;
        this.reinsertForm.legalRepresentativeName = res.legalRepresentativeName;
        this.reinsertForm.telephoneNumber = res.telephoneNumber;
        this.reinsertForm.socialCreditCode = res.socialCreditCode;
        this.reinsertForm.type = res.type;
        this.reinsertForm.issuingAuthority = res.issuingAuthority;
        this.reinsertForm.address = res.address;
        this.reinsertForm.issueDate = res.issueDate;
        this.reinsertForm.effectiveStartDate = res.effectiveStartDate;
        this.reinsertForm.effectiveEndDate = res.effectiveEndDate;
        this.reinsertForm.superAdministratorName = res.superAdministratorName==null?"无":res.superAdministratorName;
        this.reinsertForm.superAdministratorAccount = res.superAdministratorAccount==null?"无":res.superAdministratorAccount;

      })
    },


    //按条件查询菜单列表
    queryUserList() {
      getUserList(
        this.query.userCode,
        this.query.userName,
        '1',
        this.pageNum,
        this.pageSize
      ).then((res) => {
        this.userData = res.list;
        this.pageNum = res.pageNum;
        this.pageSize = res.pageSize;
        this.totalSize = res.total;
      });
    },
    // bindingUserAccount(row) {
    //   var userId = row.id;
    //   var agencyId = this.$route.query.id;
    //   var name = row.name;
    //   var account = row.account;
    //   bindingAU(agencyId,userId).then((res) => {
    //       if (res.code == 200) {
    //       this.$message({
    //         message: '绑定成功',
    //         type: 'success'
    //       });
    //       this.$nextTick(() => {
    //         this.reinsertForm.superAdministratorName = name;
    //         this.reinsertForm.superAdministratorAccount = account;
    //       })

    //     } else {
    //       this.$message({
    //         message: res.message,
    //         type: "warning",
    //       });
    //     }
    //     });
    // },
    // unbindingUserAccount(row) {
    //   var userId = row.id;
    //   var agencyId = this.$route.query.id;
    //   unbindingAU(agencyId,userId).then((res) => {
    //       if (res.code == 200) {
    //       this.$message({
    //         message: '解绑成功',
    //         type: 'success'
    //       });
    //       this.$nextTick(() => {
    //         this.reinsertForm.superAdministratorName = "无";
    //         this.reinsertForm.superAdministratorAccount = "无";
    //       })

    //     } else {
    //       this.$message({
    //         message: res.message,
    //         type: "warning",
    //       });
    //     }
    //     });
    // }





  }
};
</script>